import './index.scss';
import React, { Component } from 'react'
import Modal from 'components/Modal';
import axios from 'axios';
import dsbridge from 'dsbridge';
import wxjssdk from 'libs/wxjssdk';
import { isWechat } from 'libs/tools';

import header from './images/header.png'
import example from './images/example.svg'
import product from './images/product-ok.png'
import moment from './images/moment.png'
import wechatfriend from './images/wechatfriend.png'
import share from './images/share.png'
import back from './images/back.svg'
import nothing from './images/nothing.png'
import Toast from 'components/Toast';
import express from './images/express.png'
import { _ } from 'libs/tools';

class VaccineSearch extends Component {
	constructor(props){
		super(props);
		this.state = {
			allowSearch:false,
			VaccineNum:'',
			hasList:'',
			VaccineList:[],
			isShare:false,
			isWechatEnv:false
		}
	}

	componentDidMount() {
		let head = document.getElementsByTagName('head');
		let meta = document.createElement('meta');
		let meta2 = document.createElement('meta');
		meta.content = '疫苗批号查真伪，来彩虹育儿';
		meta.name = 'keywords';
		meta2.content = '副标题：权威数据精准查询';
		meta2.name = 'description';
		head[0].appendChild(meta);
		head[0].appendChild(meta2)
		let ua = navigator.userAgent.toLowerCase();
		if(ua.match(/MicroMessenger/i)=="micromessenger") {
			this.setState({
				isWechatEnv:true
			})
		}else{
			this.setState({
				isWechatEnv:false
			})
		}

		if(isWechat()){
			window.setDetailShare = function () {
				wxjssdk.initShare(
					location.href,
					'疫苗批号查真伪，来彩虹育儿',
					'权威数据精准查询',
					'https://jzimg.jzdoctor.com/74351bc2666c393f40b363997a195bc7.png',
				);
			};

			window.setDetailShare();
			this.shareTimer = setInterval(window.setDetailShare, 800);
		}
	}

	componentWillUnmount() {
		this.shareTimer && clearInterval(this.shareTimer);
	}


	getVaccineNum = (e) => {
		let VaccineNum = e.target.value;
		if(VaccineNum.length >= 5) {
			this.setState({
				allowSearch: true,
				VaccineNum:VaccineNum
			})
		}else{
			this.setState({
				allowSearch: false,
				VaccineNum:VaccineNum
			})
		}
	}

	searchVaccine = () => {
		const {VaccineNum} = this.state;
		if(!VaccineNum || VaccineNum.length <5){
			Toast({delay:1000,text:'请提供较为完整的疫苗批次号再做查询'});
			return false;
		}

		let that = this;
		let data = {
			batch_no:VaccineNum
		}
		axios.post('https://appapi.jzdoctor.com/apijson/vaccbatch_search',data).then( (res) => {
			let {data} = res.data;
			if(data.length === 0){
				that.setState({
					hasList:0
				})
			}else{
				that.setState({
					hasList:data.length,
					VaccineList:data

				})

			}
		}).catch( error => {
			console.log('error',error)
		})
	}

	openShare = () => {
		// this.setState({isShare:true})
		let params = {
			title: '疫苗批号查真伪，来彩虹育儿',
			description: '权威数据精准查询',
			img: 'https://jzimg.jzdoctor.com/search_vaccine_img.png',
			url: window.location.href
		};
		dsbridge.call('VaccineSearchWechat',JSON.stringify(params));
	}

	cancelShare = () => {
		this.setState({isShare:false})
	}

	VaccineSearchBack = () => {
		dsbridge.call('VaccineSearchBack','hello');
		history.back();
	}

	VaccineSearchWechatFriend = () => {
		let params = {
			title: '疫苗是否正规，来彩虹育儿一查便知',
			description: '中国食品药品检定研究院权威数据',
			img: 'common-title',
			url: window.location.href
		};
		dsbridge.call('VaccineSearchWechat',JSON.stringify(params));
		this.cancelShare();
	}

	VaccineSearchWechatMoment = () => {
		let params = {
			title: '疫苗是否正规，来彩虹育儿一查便知',
			description: '中国食品药品检定研究院权威数据',
			img: 'common-title',
			url: 'VaccineSearch'
		};
		dsbridge.call('VaccineSearchWechatMoment', JSON.stringify(params));
		this.cancelShare();
	}

	clearInput = () => {
		this.setState({
			allowSearch: false,
			VaccineNum:''
		})
	}

	render() {
		const {allowSearch,hasList,VaccineList,isShare,isWechatEnv,VaccineNum} = this.state;

		return (
			<div className="VaccineSearch">
				{
					!isWechatEnv && <div className="VaccineSearch-banner">
						<span className="VaccineSearch-back" onClick={this.VaccineSearchBack}><img src={back} alt=""/></span>
						<span className="VaccineSearch-banner-title">疫苗查询</span>
						{false && <span className="VaccineSearch-banner-share" onClick={this.openShare}><img src={share} alt=""/></span>}
					</div>
				}


				<div className='VaccineSearch-header'>
					<img src={header} alt=""/>
				</div>

				<div className='VaccineSearch-body'>
					<div className='wanringBox'>
						<span>请注意：该页面查询仅适用于【大陆疫苗】</span>
					</div>

					<div className='paddingBox'>
						<div className='VaccineSearch-body-line'>
							<input type="text" placeholder='请输入疫苗批号' value={VaccineNum} onChange={this.getVaccineNum} className='VaccineSearch-input'/>
							{ (VaccineNum && VaccineNum.length>=1) && <span className='delete-icon' onClick={this.clearInput}></span>}

						</div>

						<div className='VaccineSearch-body-line mt20'>
							<p className='VaccineSearch-little-text'>
								注:批号20190608-08只需输入20190608，注意区分“0”和“o”
							</p>
							<div className='VaccineSearch-line-example'>
								<div className="VaccineSearch-example">
									<img src={example} alt=""/>
								</div>

								{/*<p className='VaccineSearch-medium-text'>*/}
								{/*<span className="VaccineSearch-circle"></span>*/}
								{/*<span className="VaccineSearch-line"></span>*/}
								{/*疫苗产品批号在这里</p>*/}

							</div>
						</div>

						<button className={`VaccineSearch-btn ${allowSearch&&'allowSearch'}`}  onClick={_.throttle(this.searchVaccine,1000) }>
						查询
					</button>
					</div>
				</div>
				{
					hasList>0 && <div  className='VaccineSearch-list-wrap'>
						{
							 VaccineList.map( (list) => {
								return <div className='VaccineSearch-list'>

									<div className="VaccineSearch-list-left">

										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>疫苗名称:</span>
											<span className='VaccineSearch-left-line-text'>{list.name}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>疫苗规格:</span>
											<span className='VaccineSearch-left-line-text'>{list.size}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>疫苗批号:</span>
											<span className='VaccineSearch-left-line-text'>{list.batch_no}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>签发量:</span>
											<span className='VaccineSearch-left-line-text'>{list.quantity}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>有效期至:</span>
											<span className='VaccineSearch-left-line-text'>{list.expiry_date}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>生产企业:</span>
											<span className='VaccineSearch-left-line-text'>{list.company}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>证书编号:</span>
											<span className='VaccineSearch-left-line-text'>{list.certificate_no}</span>
										</p>
										<p className="VaccineSearch-left-line">
											<span className='VaccineSearch-left-line-title'>签发日期:</span>
											<span className='VaccineSearch-left-line-text'>{list.issue_date}</span>
										</p>
									</div>
									<div className="VaccineSearch-list-right">
										<img src={product} alt=""/>
									</div>

								</div>


							})
						}
					</div>
				}



				{hasList===0&&<div className='VaccineSearch-nothing'>
					<div className="VaccineSearch-nothing-img">
						<img src={nothing} alt=""/>
					</div>
					<div className="VaccineSearch-nothing-text">
						<p>官方公布数据中未检测到您所查询的疫苗批号</p>
						<p>可能有以下原因：</p>
						<p>1.疫苗批号输入错误，请再次核验</p>
						<p>2.该疫苗生产企业未能及时上传信息</p>
					</div>
				</div>}


				<div className='expressBox'>
					<img src={express} alt=""/>
				</div>

				<Modal
					title="分享给朋友"
					visible={isShare}
					footer={<div className="modal-btn" onClick={this.cancelShare}>取消</div>}
				>
					<div className='VaccineSearch-share'>
						<div className="VaccineSearch-share-img" onClick={this.VaccineSearchWechatFriend}>
							<img src={wechatfriend} alt=""/>
							<p>发送给微信好友</p>
						</div>
						<div className="VaccineSearch-share-img" onClick={this.VaccineSearchWechatMoment}>
							<img src={moment} alt=""/>
							<p>分享到朋友圈</p>
						</div>
					</div>
				</Modal>



			</div>
		);
	}
}

export default VaccineSearch;
